<template>
  <div id="app">
      <div class="body">

    <!-- content -->
      
    <div>
        <div class="sidebar" style="display:block;left: 0px;">   
        <div v-if="categorylist">
            
        <ul v-for="itemlist in categorylist">
            <li>
                <router-link class="left-div-herf" :to="{path: 'statute?category=' + itemlist.id }">{{itemlist.name}} <span class="smallBox" v-if="itemlist.childrens"></span><Icon type="ios-arrow-forward" class="ios-arrow-forward"></Icon>
                    
                    <div class="right-div" v-if="itemlist.childrens">

                        <dl v-for="(item1, index1) in itemlist.childrens.data" :key="index1">


                            <router-link  :to="{path: 'statute?category=' + item1.id}">
                                <dt class="dt">{{item1.name}}</dt>
                            </router-link>

                            <div v-if="item1.childrens">

                                <dl  style="float: left;width: 100%;"  v-for="(item2, index2) in item1.childrens.data" :key="index2">
                                    <router-link  :to="{path: 'statute?category=' + item2.id}">
                                        <dd  style="font-weight:800">{{item2.name}}</dd>
                                    </router-link>

                                    <div v-if="item2.childrens">

                                        <dl  v-for="(item3, index3) in item2.childrens.data" :key="index3">
                                            <router-link  :to="{path: 'statute?category=' + item3.id}">
                                                <dd>{{item3.name}}</dd>

                                            </router-link>
                                        </dl>

                                    </div>

                                </dl>

                            </div>

                        </dl>

                    </div>
                </router-link>
            </li> 
        </ul>
        </div>
     </div>
        <div class="subNav">

         <div class="sub-nav-list">
            <h3 class="news-title">
                <span>最新资讯</span>
                <span class="news-more"><router-link :to="{path:'/news'}">更多+</router-link></span>   
            </h3>
            <ul class="news-list">
                <li v-for="itemnews in newslist">
                    <router-link :to="{path:'/newsContent/?id=' + itemnews.id}"> {{itemnews.name}}
                        <span>{{itemnews.inTimes}}</span>
                    </router-link>
                </li>
               
            </ul>
        </div>
    </div>

     <div class="statute-list-content category">
            <p class="category-title">
                <span class="category-hr"></span>
                <span class="category-name">法规分类</span>
            </p>
        <div class="statute-contiter" v-if="categorylist">
        
            <div class="statute-list-content-box"  v-for="item in categorylist">
                <ul class="statute-list-left" v-if="item.name">
                   <li class="childens1">

                   <router-link :to="{path: '/statute'}"> {{item.name}}</router-link>
                    
                   </li> 
                     
                </ul>
            </div>
        </div>
    </div>

    <div class="more-recommend category">

        <div class="term">
            <div class="term-title">
                术语学习
            </div>
            <div class="term-content">

                <p class="term-active">"  Accelerated testing  "</p>
                <p> 加速试验</p>
            </div>
            <div class="term-orgin">
             <Rate v-model="value"></Rate>
                <p class="term-orgin-p">来源：ICH-Q1A(R2)</p>
                <p>定义：为加快原料药或制剂的化学降解或物理变化而进行的超出储存条件下的研究设计，是正式稳定性研究的一部分。加速试验与长期稳定性试验的数据，可用于评估在非加速条件下更长时间的化学影响，及对可能在运输期间发生的短期偏离标示储存条件的影响。加速试验的结果不一定能预测物理变化。</p>
               
            </div>
            <router-link class="term-herf" :to="{path: '/term'}">查看更多专业术语..</router-link>

        </div>
    </div>

    <div class="category">

             <p class="category-title">
                <span class="category-hr"></span>
                <span class="category-name">问答专区</span>
            </p>

        <table class="questions-index-table">

           

            <div class="question-logo">
                常见的注册问题    <Icon type="ios-search"></Icon>  ?

            </div>
            
            <tr class="questions-index-tr" v-for="items in questionslist">

            <router-link class="questions-more" :to="{path: '/questions'}">查看更多问答..</router-link>
                
                <td class="questions-index-td">{{items.title}} </td>

            </tr>

        </table>

    </div>

    <div class="more-recommend category">

        <p class="category-title">

            <span class="category-hr"></span>

            <span class="category-name">合作伙伴</span>
        </p>
 
        <ul class="myfriends">
            
                <li>药品注册网</li>
                <li>药品注册网</li>
                <li>药品注册网</li>
                <li>药品注册网</li>
        </ul>

        <ul class="myfriends">
            
                <li>药品注册网</li>
                <li>药品注册网</li>
                <li>药品注册网</li>
                <li>药品注册网</li>
        </ul>


    </div>
  </div>
  </div>
  </div>

</template>
<script>

    export default {
      
        data () {
            return {
                
                carouselList:[],
                termlist:[],
                questionslist:[],
                cclist:[],
                newslist:[],
                value:5.0,
                searchKeyWorld:'',
                categorylist:[],
                keyword: 'news',
                columns: [
            
            {
                title: '术语（English）',
                key: 'english',
                align: 'left',
            },
            {
                title: '术语（中文）',
                key: 'chinese',
                align: 'left',
            },
            
            
            {
                title: '定义（中文）',
                key: 'defines',
                align: 'left',
            },
            {
                title: '定义（English）',
                key: 'english_defines',
                align: 'left',
            },
            {
                title: '来源（Sources）',
                key: 'sources',
                align: 'left',
            },
            {
              title: '操作（Action）',
              key: 'action',
              width: 150,
              align: 'left',
              render: (h, params) => {
                  return h('div', [
                      h('Button', {
                          props: {
                              type: 'primary',
                              size: 'small'
                          },
                          style: {
                              marginRight: '5px'
                          },
                          on: {
                              click: () => {
                                  this.routeLink('/term-content?id=' + params.row.id);
                              }
                          }
                      }, '查看详情'),
                  ]);
              }
          }
        ],

            }
        },
        created() {

            this.getCarousel();

        },
        methods:{

            getCarousel() {

            this.$http.get('/category/list',{params:{include:"childrens.childrens.childrens"}}).then(res => {

                this.categorylist = res.data.data;


                }).catch(err => {

                    this.$Message.error( 'category');
                
            })

            // news

            this.requestSearchData( '/news/list' , 'laud', 'newslist' );
            
            // news

            this.requestSearchData( '/questions/list' , 'category', 'questionslist' );
           

            },

            searchBtn(){

                console.log(this.keyword);

                if ( this.keyword == 'statute' ) {

                     this.routeLink('/statute?name=' + this.searchKeyWorld); 


                }else if( this.keyword == 'news' ){


                    this.routeLink('/news?name=' + this.searchKeyWorld); 

                }else{

                    this.routeLink('/business?name=' + this.searchKeyWorld); 
                   

                }

            },

            requestSearchData(api,dataStyle,requestData ){

                this.$store.commit('mainLoading', true);

                this.$http.get(api,{parames:{include:dataStyle}}).then(res => {

                    var switchData = requestData;

                    switch ( switchData ) {

                        case 'categorylist':

                            this.categorylist = res.data.data;

                        break;

                        case 'newslist':

                                // this.newslist = res.data.data;

                                for (var i = 0; i < 8; i ++ ) {
                                    
                                    this.newslist.push(res.data.data[i]);
                                }

                        break;

                        case 'questionslist':

                            for( var j = 0; j<7 ; j ++) {

                                this.questionslist.push(res.data.data[j]) ;
                            }
                                
                                

                            

                        break;

                        case 'cclist':

                            this.cclist = res.data.data;



                        break;

                        case 'carouselList':

                            this.carouselList = res.data.data;

                        break;

                        default:

                         this.$Message.error( '暂无数据');

                    }


                    this.$store.commit('mainLoading', false);

                    }).catch(err => {

                        this.$Message.error( 'questions');
                    
               })
            },
            routeLink(link) {

                this.$router.push({path: link});

                window.location.reload();
             },

        }
    }
</script>

<style scoped>

    @import '../assets/css/ccm.css';
    .term{
      width: 100%;
      height: 358px;
      position: relative;
      padding: 12px 0;
    }
.term-title{
  width: 20px;
  float: left;
  height: 370px;
  line-height: 80px;
  padding: 0 120px;
  cursor: pointer;
  font-size: 28px;
  border-right: 1px solid #eee;
}
.questionA>.ivu-rate{
  float: right;
}
.term-title img{
  position: relative;
  right: 36px;
  top: 24px;
}
.term-content{
  width: 248px;
  height: 370px;
  text-align: center;
  border-right: 1px solid #eee;
  float: left;
  line-height: 370px;
}
.term-content p{
  height: 30px;
  width: 248px;
  font-size: 18px;
  line-height: 30px;
  cursor: pointer;
  text-align: center;
}
.term-content p:first-child{

  margin-top: 148px;
}
.term-active{
  margin-top: 60px;
}
.term-orgin{
  width: 520px;
  margin:30px 0 0  48px;
  float: left;
}
.term-orgin p{
  height: 48px;
  width: 500px;
  font-size: 16px;
  cursor: pointer;
  line-height: 48px;
}
.ios-arrow-forward{
  float: right;
  color: #c00;
  margin:12px 8px 0 0;
}
.arrow-swap{
  position: absolute;
  left: 428px;
  top: 95px;
  color:#c00;
}
.term-orgin-p{
  border-bottom: 1px solid #eee;
}
p{
  cursor: pointer;
}
.term-herf,.category-herf{
  position: absolute;
  right: 36px;
  bottom: 12px;
  color: #2d8cf0;
}
.term-herf{
  right: 60px;
  font-size: 16px;
}
table,tr,td{
    margin: 0;
    padding: 0;
}
.questions-index-table{
    position: relative;
    width: 95%;
    margin: 0 auto;
    border:1px solid #eee;
    height: 288px;
    padding: 12px 0;
    cursor: pointer;
    border-radius: 4px;
    overflow: hidden;
}
.questions-index-tr{
    flex:1;
    height: 35px;
    line-height: 35px;
}
.questions-index-td{
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    width: 50%;
    float: right;
    display: inline-block;
    text-align: left;
    height: 36px;
    line-height: 36px;
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap;
}

.questions-index-tr:nth-child(1){
    background: #f3b700;
    border-radius: 6px 6px 0 0;
}
.questions-index-tr:nth-child(2){
    background: #3465aa;
}
.questions-index-tr:nth-child(3){
    background: #08a570;
}
.questions-index-tr:nth-child(4){
    background: #7d388b;
}
.questions-index-tr:nth-child(5){
    background: #b3005b;
}
.questions-index-tr:nth-child(6){
    background: #e57d02;
}
.questions-index-tr:nth-child(7){
    background: #0ba374;
}
.questions-index-tr:nth-child(8){
    background: #7db753;
    border-radius:0 0 6px 6px;
}

.question-logo{
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 100%;
    background: #fff;
    top: -20px;
    left: 88px;
    text-align: center;
    line-height: 320px;
    font-size: 28px;
}
.questions-more{
    display: inline-block;
    width: 130px;
    height: 35px;
    text-align: center;
    float: right;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
}

</style>

